<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素浮动后的特点</title>
    <!--
    元素浮动之后是脱离文档流的:文档流其实就是最底层的一块板,所有行内,块元素都在这块板上排列
    我们的视角就是像是俯视的视角一样
    当一个盒子进行浮动之后,就会升至这块板的上方,也就是脱离了文档流,浮动的元素就不具备文档流该有的状态(比如说不会像作行内块元素一样当作文本进行处理等等)

    浮动后的特点:
    不会独占一行,会和其他元素共用一行
    不管浮动前是什么元素,浮动后,默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高
    元素浮动之后就不会像作行内块元素一样当作文本进行处理
    不会margin合并,也不会margin塌陷,能够完美设置四个方向的padding个margin
    -->
</head>
<style>
    .outer {
        width: 800px;
        height: 400px;
        background-color: gray;
        padding: 10px;
        text-align: center;
    }

    .box {
        font-size: 20px;
        padding: 10px
    }

    .box1 {
        background-color: green;

    }

    .box2 {
        background-color: #4b6aff;
        margin: 10px;
        float: left;
        /*
        可以这么理解,盒子2从地面飘起来,
        盒子3看到地面上的盒子2飘起来之后有了位置,
        就往上移动,盒子二现在是在盒子3的上方,
        只是盒子3的文字不会被盒子2覆盖
        浮动之后 盒子2和盒子3共用1行,但是盒子2在天上,盒子3在地上
        */
    }

    .box3 {
        float: left;
        background-color: orange;
    }
</style>
<body>
<div class="outer">
    <div class="box box1">盒子1</div>
    <div class="box box2">盒子2</div>
    <div class="box box3">盒子3</div>
</div>
</body>
</html>